<template>
  <div class="wrap">
    <head-title :title="headText" @callback="onClickLeft"></head-title>
    <div class="order wrapbd">
      <div class="orderdetail margin20">
        <div style="background-color: #fff;text-align: center;"><van-icon name="checked" style="font-size: 2rem;color: green;margin-top: 1rem;"/></div>
        <div class="adddelation">
          <div style="text-align: center;font-size: 16px;">支付成功！</div>
        </div>
        <div class="adddelation" style="padding: 1rem 2rem;">
            <van-button @click="tomall()">继续购买</van-button>
            <van-button @click="torecord()" style="float: right;">返回订单</van-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import HeadTitle from "./../../components/title.vue"
  import { Icon,Button,Dialog } from 'vant';
  export default {
    data(){
      return {
        headText: '支付状态',  //顶部标题
        orderNo: this.$route.query.order_no,
      }
    },
    created(){},
    mounted(){
      var _this = this;
      _this.initialize();  //拉取商品详情信息
    },
    methods:{
      //左上角返回键
      onClickLeft () {this.$router.push('/record?status=1')},
      // onClickLeft () { this.$router.go(-1);},
      //商品详情
      initialize(){
        // this.checkOrder();
      },
      //获取商品详情
      checkOrder(){
        var _this = this;
        this.Tools.AXIOS({
          url: 'order/checkpay',
          transformRequest: {
            order_no: this.orderNo
          },
          success: function (res) {
            if(res.data.data == 0){
              Dialog.alert({
                message: '请从订单页面获取支付状态'
              }).then(() => {
                _this.$router.push({path:'orderDetails',query:{id:_this.orderNo}});
              })
            }
          },error: function(res){
            _this.$toast({message: res.data.msg, position: 'bottom',duration: 3000})
          }
        })
      },
      torecord() {
        this.$router.push({path:'record',query:{status:1}});
      },
      tomall() {
        this.$router.push({path:'mall'});
      }
    },
    components: {
      HeadTitle,
      [Icon.name]: Icon,
      [Button.name]: Button,
      Dialog
    },
  }
</script>
<style scoped>
  .orderdetail{ width: 100%; margin-bottom: 2rem;}
  .orderdetail .adddelation{ padding: .5rem .3rem; background: #fff; position: relative; border-bottom: 1px solid #F9F9F9;}
  .orderdetail .adddelation span{ overflow: hidden; display: block;}
  .orderdetail .adddelation span h2{ font-size: .35rem; font-weight: normal; color: #323232; margin-bottom: .4rem;}
  .orderdetail .adddelation p{ display: block; width: 85%; color: #666; font-size: .35rem;}
  .orderdetail .adddelation i{ position: absolute; color: #c7c7cc; right: .3rem; top: 1.25rem;}
  .orderdetail .productdetail{ padding: .3rem; overflow: hidden; position: relative; border-bottom: 1px solid #ececec;}
  .orderdetail .productdetail i{ width: 30%;}
  .orderdetail .productdetail i img{ width: 100%; }
  .orderdetail .productdetail span{ width: 65%; font-size: .35rem; margin: 0 2%; color: #666;}
  .orderdetail .productdetail span p{ width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
  .orderdetail .productdetail span label{ margin-top: .1rem; display: block; color: #B1A99C; font-size: .32rem;}
  .orderdetail .productdetail b{ position: absolute; font-weight: normal; font-size: .5rem; right: .5rem; top: 1.7rem; color: #ea8800;}
  .orderdetail .buynub{ width: 100%; background-color: #fff; padding: .4rem 0; overflow: hidden;}
  .orderdetail .buynub h3{ font-size: .35rem; margin-left: .3rem; font-weight: normal; line-height: .3rem; color: red;}
  .orderdetail .buynub div{ margin-right: .5rem; height: .6rem; border: 1px solid #ac956c; border-radius: 3px;}
  .orderdetail .buynub div span{ text-align: center; height: .6rem; line-height: .6rem;}
  .orderdetail .buynub div span:nth-of-type(1){ border-right: 1px solid #ac956c;}
  .orderdetail .buynub div span:nth-of-type(2){ border-left: 1px solid #ac956c;}
  .orderdetail .buynub div span i{ padding:0 .2rem; color: #ac956c; }
  .orderdetail .buynub div input{ margin: 0 .4rem; background:none; font-size: .36rem; line-height: .6rem;}
  .allOrder{ width: 100%; position: fixed; bottom: 0; left: 0; border-top: 1px solid #E5E5E5; background-color: #fff;}
  .allOrder p{ font-size: .35rem; color: #666; margin: .5rem .3rem 0;}
  .allOrder p label{ font-size: .35rem; color: #ea8800; }
  .sumbOrder{ width: 30%; text-align: center; color: #fff; font-size: .35rem; background-color: #ea8800; padding: .5rem 0;}
  .isradio{ width:75%; display: flex; margin-top: .1rem;}.ptcheck{ margin-left: 6%;}.margin_r{margin-right: 6%;}
  .c-title{ margin-bottom: .2rem;color: #999;}
  .express-tips{ color: #ea8800;margin-top: .1rem;}
  .product-t{    color: #666;font-size: .35rem;padding: 0 .2rem;background-color: #f6f6f6;}
  .product-t i{color: #ea8800;font-style:normal}
  .status-box{ color: #fff;}
  .icon-t{margin-right: .1rem;font-size: .5rem;}
</style>
